<template>
  <div id="XMap">Map</div>
</template>

<script lang="ts">
import { onMounted } from "vue";
export default {
  name: "XMap",
};
</script>

<script lang="ts" setup>
onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=IFUxX3WiL6cENUMDK2PMQTuIlru0UCHb&callback=initMap";
  document.body.appendChild(script);
  window.initMap = () => {
    var map = new BMapGL.Map("XMap");
    var point = new BMapGL.Point(114.05, 22.543099);
    map.centerAndZoom(point, 10);

    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  };
});
</script>

<style scoped>
#XMap {
  width: 100%;
  height: 500px;
}
</style>
